import React from "react";
import './TodoMain.css';
import store from "../../../redux/store";
import { checkTodoAction, removeTodoAction, requestRemoveTodo, requestUpdateTodo } from "../../../redux/reducers/todoReducer";

export default function TodoMain() {
  return (
    <ul className="todo-main">
      {
        store.getState().todo.map(item => {
          return <li key={item.id}>
                    <label>
                      <input type="checkbox" checked={item.done} onChange={(e) => {
                        store.dispatch(requestUpdateTodo(item.id, e.target.checked));
                      }} />
                      <span className={item.done ? "done" : ''}>{item.title}</span>
                    </label>
                    <button className="btn btn-danger" onClick={() => {
                      store.dispatch(requestRemoveTodo(item.id));
                    }}>删除</button>
                  </li>
        })
      }

      {
        store.getState().todo.length === 0 && <li style={{padding: '20px 0', textAlign:'center'}}>暂无数据</li>
      }
    </ul>
  );
}
